<script setup lang="ts">
import { ElInput, ElSwitch } from "element-plus";

// import UploaderSingle from '@/components/common/UploaderSingle.vue';
import ProForm from "@/modules/package/form/components/ProForm.vue";
import useForm from "@/hooks/useForm";
import { TStall } from "@/global";

import { ProInputNumber, ProSelect } from "@/modules/package/form";
import { EnumBannerType } from "@/utils/enum";
import ApiContent from "@/api/content";
import { h } from "vue";
import UploaderSingle from "@/components/common/UploaderSingle.vue";

const { source, modalApi } = defineProps<{
  source?: TStall;
  modalApi?: any;
}>();

const emits = defineEmits<{
  success: [];
}>();

const formItems = [
  {
    label: "图片",
    children: {
      field: "img",

      type: h(UploaderSingle, {
        class: "flex-center w-247px h-370px border-1 rounded-md border-#ddd",
      }),
    },
  },
  {
    label: "点击事件",
    children: {
      field: "jump_type",
      type: ProSelect,
      props: {
        options: EnumBannerType,
      },
    },
  },
  {
    label: "跳转链接",
    children: {
      field: "jump_url",
      type: ElInput,
      props: {},
    },
    hidden: (model: any) => model.jump_type == 0,
  },
  {
    label: "轮播图名称",
    children: {
      field: "title",
      type: ElInput,
    },
  },
  {
    label: "显隐状态",
    children: {
      field: "status",
      type: ElSwitch,
      props: {
        inactiveValue: 1,
        activeValue: 0,
        activeText: "显示",
        inactiveText: "隐藏",
      },
    },
  },
  {
    label: "排序",
    children: {
      field: "sort",
      type: ProInputNumber,
      props: {
        min: 1,
        precision: 0,
        max: 1000,
      },
    },
  },
  {
    label: "备注",
    children: {
      field: "desc",
      type: ElInput,
      props: {
        type: "textarea",
      },
    },
  },
];

const { refForm, isFetching, model, reset, submit, onFetchResponse } =
  useForm<TStall>(ApiContent[source ? "updateInfo" : "addInfo"], {
    defaultModel: Object.assign(
      {
        title: "",
        // img: "https://eatnival.oss-cn-shenzhen.aliyuncs.com/eatnival/20250227/cdb22da0ef1044baba4fb865529d474a.jpg",

        content_type: 7,
        category: 2,
        status: 0, // 默认展示（0是展示）
        sort: 100,
        jump_type: 0,
      },
      source && { ...source, deposit_amount: source.deposit_amount / 100 }
    ),
    formatModel: (data) => {
      // 转为分
      return { ...data, deposit_amount: data.deposit_amount * 100 };
    },
  });

onFetchResponse(() => {
  modalApi?.close();
  emits("success");
});

const rules = {
  img: {
    required: true,
    message: "请上传轮播图图（494 * 740或者 741 * 1010）",
  },
  sort: { required: true, message: "输入展位顺序" },
  jump_url: { required: true, message: "请输入跳转链接" },
};
</script>

<template>
  <ProForm
    :col="24"
    ref="refForm"
    :rules="rules"
    :model="model"
    :loading="isFetching"
    :form-items="formItems"
    label-width="6em"
    @reset="reset"
    @submit="submit"
  >
  </ProForm>
</template>
